
.index-bg {

  // background: url('/assets/images/index/topbg.png') center top no-repeat;
  background-size: 100% auto;
  background-color: #3366FF;


  .index-top {
    width: 100%;
    font-size: 1.625rem;
    font-weight: bold;
    color: #fff;
    height: 6rem;
    position: fixed;
    margin-top: 0;
    z-index: 9999;

    .Search {
      height: 3.75rem;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 1.75rem;
      padding: .5rem 1.5625rem;
      margin: 1.2rem;
      width: 32rem;

      span {
        font-size: 1.625rem;
        color: #333;
        // margin-top: 1rem;
      }

      a {
        padding: 1rem;
        line-height: 6rem;
      }
    }

    .top-user {
      border-radius: 50%;
      background: rgba(51, 51, 51, .3);
      width: 4rem;
      height: 4rem;
      margin: auto;
      margin-top: 1rem;

      a {
        line-height: 4.5rem;
        margin: 1rem;
      }
    }
  }

  .index-top-b {
    width: 100%;
    font-size: 1.625rem;
    font-weight: bold;
    color: #fff;
    height: 6rem;
    position: fixed;
    margin-top: 0;
    z-index: 2;

    .r {
      display: flex;
      float: right;

      a {
        background: rgba(51, 51, 51, 0.3);
        border-radius: 50%;
        padding: 1rem;
        line-height: 6rem;
      }
    }
  }
  
  .game-body {
    padding: 0 1.5rem 1rem ;
    .game-list{
      border-radius:1.25rem;
      background: #fff;
      box-shadow:0px 3px 7px 0px #333;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      .img-c {
        width: 100%;
        height: 10rem;
    
        .game-c {
          display: flex;
          padding: 1rem;
          border-radius: .5rem;
    
          .game-text-c {
            display: flex;
            width: 100%;
            margin-left: 1rem;
            padding-bottom: 1rem;
            margin-top: 0.5rem;
            border-bottom: 1px solid #EEEEEE;
    
            .game-text {
              width: 75%;
    
              img {
                height: 2.125rem;
                margin: 0;
              }
    
              p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box; //作为弹性伸缩盒子模型显示。
                -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
                -webkit-line-clamp: 1; //显示的行
                font-size: 1.5rem;
                color: #333333;
              }
    
              em {
                font-size: 2.25rem;
              }
            }
          }
    
          img {
            margin-top: 1rem;
            border-radius: .5rem;
            height: 7.5rem;
            width: 7.5rem;
          }
        }
    
        .pay-btn {
          background: #ff9800;
          color: #fff;
          margin: auto;
          margin-right: 0rem;
          padding: 1rem 2rem;
          font-size: 1.875rem;
          height: 3.625rem;
          line-height: 2rem;
          border-radius: 1.8125rem;
          white-space:nowrap;
        }
      }
      
      .top-title {
        display: flex;
        width: 100%;
        padding-bottom: 1rem;
        border-bottom: .0625rem solid #dcdc;
        box-shadow: -1px -4px 8px -6px #ff9800;
        margin-top: 3rem;
        h1 {
          min-width: 15rem;
          color: #ff9800;
          margin-left: 1rem;
        }
  
        .title-tab {
          width: 75%;
          margin-right: 1rem;
          margin-top: 2.5rem;
  
          a {
            float: right;
            font-size: 1.875rem;
            margin-left: 1rem;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
    }

    .game-play {
      border-radius:1.25rem;
      padding: 1rem;
      padding-bottom: 2.5rem;
      margin-top: -2rem;
      z-index: 999;
      position: relative;
      background: #fff;
      box-shadow:0px 3px 7px 0px #333;
      h3 {
        color: #ff9800;
        font-size: 2.5rem;
        padding-bottom: 1rem;
        border-bottom: .0625rem solid #dcdc;
      }

      .game-plays {
        // overflow: auto;
        border-radius: .5rem;
        display: flex;
        text-align: center;

        .plays-img {
          margin-right: .875rem;
          max-width: 20%;
          flex: 1;
          p {
            font-size: 1.2rem;
            max-width: 7rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          img {
            margin-top: 1rem;
            border-radius: .5rem;
            width: 100%;
          }
        }
      }
    }

    h1 {
      font-size: 2.5rem;
      margin-top: 1.875rem;
    }

  }

  .pay-sure-box {
    width: 90%;
    left: 5%;
    top: 50%;
    padding: 3rem;
    position: absolute;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    border-radius: 1rem;

    .icon-close {
      font-size: 4rem;
      color: #999;
      position: absolute;
      right: 1rem;
      top: 1rem;
      font-style: normal;
      line-height: 4rem;
      display: block;
      width: 4rem;
      height: 4rem;
      text-align: center;

      &:active {
        color: #265BCD;
      }
    }

    h3 {
      font-size: 2.4rem;
      margin-bottom: 1rem;
      margin-top: 2rem;
      text-align: center;
      font-weight: normal;
    }

    .user-amount {
      font-size: 3rem;
      color: #265BCD;
      text-align: center;
      margin: 2rem 0;
    }

    button.btn-primary {
      width: 40%;
      padding: 1.5rem 0;
    }

    button.btn-default {
      width: 40%;
      font-size: 2.25rem;
      padding: 1.5rem 0;
      line-height: 1;
      text-align: center;
      display: block;
      margin: 4rem auto 0 auto;
      border: none;
      background: #E6E6E6;
      border-radius: 3rem;
      color: #333;
    }

    p {
      font-size: 1.5rem;
      color: #333;
      margin-top: 1rem;
      text-align: center;
    }

    .btn-primary {
      font-size: 2.25rem;
      padding: 1.75rem 0;
      line-height: 1;
      text-align: center;
      display: block;
      width: 70%;
      margin: 4rem auto 0 auto;
      border: none;
      background: #265BCD;
      border-radius: 3rem;
      color: #fff;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
    }
  }

}

.lf {
  text-align: left;
  margin-left: 1.5625rem;
  display: flex;
}

.rf {
  text-align: right;
  margin-right: 1.5625rem;
  max-width: 12rem;
}